<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>


<div id="myChart-pie" style="width: 400px;height:400px;"></div>
<script>
    var myChartPie = echarts.init(document.getElementById('myChart-pie'));

    // Convert server data to ECharts format
    var data = [
        {value: ${firstGroup}, name: '第一部门'},
        {value: ${secondGroup}, name: '第二部门'},
        {value: ${thirdGroup}, name: '第三部门'}
    ];

    var option = {
        title: {
            text: '部门等级',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['第一部门', '第二部门', '第三部门']
        },
        series: [
            {
                name: '部门等级',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChartPie.setOption(option);
</script>

</body>
</html>
